<style include="cr-shared-style settings-shared">
  #wrapper {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
  }

  h2 {
    color: var(--cr-primary-text-color);
    font-size: 22px;
    padding-top: 0;
  }

  #title {
    font-weight: 400;
  }

  #bodyText {
    padding-block-end: 16px;
  }

  #startButton {
    margin-inline-end: 16px;
  }
</style>
<div id="wrapper">
  <div id="controlsColumn">
    <h2 id="title" aria-hidden="true">$i18n{privacyReviewPromoHeader}</h2>
    <div id="bodyText" class="cr-secondary-text" aria-hidden="true">
      $i18n{privacyReviewPromoBody}
    </div>
    <cr-button class="action-button" id="startButton" role="button"
        aria-labelledby="title" aria-describedby="bodyText"
        on-click="onPrivacyReviewStartClick_">
      $i18n{privacyReviewPromoStartButton}
    </cr-button>
    <cr-button id="noThanksButton" role="button"
        on-click="onNoThanksButtonClick_">
      $i18n{noThanks}
    </cr-button>
  </div>
  <picture>
    <source class="banner"
        srcset="./images/privacy_review/promo_banner_dark.svg"
        media="(prefers-color-scheme: dark)">
    <img class="banner" alt=""
        src="./images/privacy_review/promo_banner.svg">
  </picture>
</div>
